<!--
 * @Author: zx
 * @Date: 2022-05-13 15:25:22
 * @LastEditTime: 2022-12-23 15:49:04
 * @Description:
 * @LastEditors: yaoling 1871883713@qq.com
-->
<template>
  <el-form
    ref="loginForm"
    :model="state.form"
    :rules="state.rules"
    @keydown.enter="handleSubmit"
    class="form-login pass-form"
    autocomplete="off"
  >
    <!-- 假填充盒子 -->
    <div style="width: 0; height: 0; overflow: hidden">
      <input type="text" name="prevent_autofill" id="prevent_autofill" value="" />
      <input type="password" name="password_fake" id="password_fake" value="" />
    </div>
    <!-- <el-form-item prop="userName">
        <el-input size="large" v-model="state.form.userName" placeholder="请输入手机号"></el-input>
      </el-form-item> -->
    <!-- <el-form-item prop="code">
        <el-input size="large" v-model="state.form.code" placeholder="请输入验证码">
          <template #suffix>
            <span class="slot-icon">
              <a
                href="javascript:void(0)"
                @click="getCode"
                :style="{ color: time <= 0 ? '' : '#ccc' }"
              >
                获取验证码
                <span v-if="time">({{ time }}s)</span>
              </a>
            </span>
          </template>
        </el-input>
      </el-form-item> -->
    <el-form-item label="当前密码" prop="password">
      <el-input
        size="large"
        type="password"
        v-model="state.form.password"
        placeholder="请输入当前密码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="newPassword">
      <el-input
        size="large"
        type="password"
        v-model="state.form.newPassword"
        placeholder="请输入新密码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="reNewPassword">
      <el-input
        size="large"
        type="password"
        v-model="state.form.reNewPassword"
        placeholder="请再次输入新密码"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="long-btn" size="large" @click="handleSubmit" color="#6C52EA" long>
        重置密码
      </el-button>
      <el-button class="long-btn" size="large" @click.stop="doBackLogin" long> 返回登录 </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
// import { reactive, onMounted, watch, ref } from 'vue'
// import { ElMessage } from 'element-plus'
// // import { getChangePassCode } from '@/api/user'
// import { dataInterface } from '@/apis/login/login'
// import { useRouter } from 'vue-router'
// const router = useRouter()
// const state = reactive({
//   modifyLoading: false,
//   form: {
//     userName: '',
//     code: '',
//     password: '',
//     newPassword: '',
//     reNewPassword: ''
//   },
//   rules: {
//     userName: [
//       {
//         validator: (rule, value, cb) => {
//           if (!value) {
//             cb(new Error('手机号不能为空！'))
//           } else {
//             const reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
//             if (!reg.test(value)) {
//               cb(new Error('手机号格式不正确'))
//             } else {
//               cb()
//             }
//           }
//         },
//         trigger: 'blur'
//       }
//     ],
//     code: [
//       {
//         validator: (rule, value, cb) => {
//           if (!value) {
//             cb(new Error('验证不能为空！'))
//           } else {
//             const reg = /^\d{4}$/
//             if (reg.test(value)) {
//               cb()
//             } else {
//               cb(new Error('验证码格式不正确'))
//             }
//           }
//         },
//         trigger: 'blur'
//       }
//     ],
//     password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
//     repassword: [
//       {
//         validator: (rule, value, cb) => {
//           if (!value) {
//             cb(new Error('确认密码不能为空！'))
//           } else {
//             if (this.form.password !== value) {
//               cb(new Error('两次密码不一致'))
//             } else {
//               cb()
//             }
//           }
//         },
//         trigger: 'change'
//       }
//     ]
//   },
//   hasCode: false,
//   timer: '',
//   time: 0
// })
// const emits = defineEmits(['on-success-valid', 'do-back-login'])
// watch(
//   () => state.time,
//   (value) => {
//     if (value > 0) {
//       state.timer = setTimeout(() => {
//         state.time = state.time - 1
//       }, 1000)
//     } else {
//       clearTimeout(state.timer)
//       state.hasCode = false
//     }
//   }
// )
// /**
//  * @desc: 提交
//  */
// const handleSubmit = () => {
//   if (!state.form.newPassword) {
//     ElMessage.error('新密码不能为空')
//     return
//   }
//   if (!state.form.reNewPassword) {
//     ElMessage.error('重复密码不能为空')
//     return
//   }
//   if (state.form.reNewPassword != state.form.newPassword) {
//     ElMessage.error('两次输入密码不一致')
//     return
//   }
//   state.modifyLoading = true
//   dataInterface(
//     {
//       old_password: state.form.password,
//       password: state.form.newPassword,
//       password_confirmation: state.form.reNewPassword
//     },
//     'api/user/changeNewPassword'
//   )
//     .then((res) => {
//       state.modifyLoading = false
//       if (res.code == 200) {
//         localStorage.setItem('updatePwd', 1)
//         ElMessage.success('修改成功！即将自动跳转到登录页重新登录！')
//         emits('on-success-valid', {
//           userName: state.form.userName,
//           password: state.form.password
//         })
//       }
//     })
//     .catch((err) => {
//       console.log(err)
//       state.modifyLoading = false
//       ElMessage.error('操作失败！')
//     })
// }
// /**
//  * @desc: 获取验证码
//  */
// const getCode = () => {
//   if (state.time <= 0) {
//     if (!state.form.userName) {
//       ElMessage.error('手机号或邮箱不能为空')
//       return
//     }
//     state.time = 30
//     getChangePassCode(state.form.userName).then((res) => {
//       if (res.code == 200) {
//         ElMessage.success('发送成功！')
//         return
//       }
//       state.time = 0
//     })
//   }
// }
// const doBackLogin = () => {
//   emits('do-back-login')
// }
</script>
<style lang="less" scoped>
@inputHeight: 34px;
.form-login {
  width: 356px;
  padding-bottom: 12px;
  background: #fff;
  border-radius: 4px;
  :deep(.el-form-item) {
    margin-top: 12px;
    padding: 0 36px;
    box-sizing: border-box;
    .el-input {
      .el-input__inner {
        height: @inputHeight;
        line-height: @inputHeight;
        font-family: 'Source Han Sans CN';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        &::placeholder {
          color: #9b9b9b;
        }
      }
    }
    .long-btn {
      width: 100%;
      height: @inputHeight;
      font-weight: 500;
      font-size: 14px;
      & + .long-btn {
        margin-left: 0;
        margin-top: 12px;
      }
    }
  }
}
.slot-icon {
  padding-left: 10px;
  border-left: 1px solid #dcdee2;
  color: #a1a5ad;
  font-size: 14px;
  line-height: 40px;
  a {
    color: #0076ff;
  }
}
</style>
